// import "./App.css";
import { useState } from "react";
import "@/App.css";
// @ts-ignore
import style from "./app.less";
// import scssStyles from "./app.module.scss";
// import stylStyles from "./app.module.styl";
// @ts-ignore
import smallImg from "./assets/imgs/small.png";
// import bigImg from '@/assets/imgs/10kb_img.png'
import font from "./assets/fonts/iconfont.css";
import memberList from "./test.json";

function App() {
  console.log("memberList", memberList);
  const [count, setCounts] = useState("");
  const onChange = (e: any) => {
    setCounts(e.target.value);
  };
  return (
    <div>
      <div>
        <p>受控组件12</p>
        <input type="text" value={count} onChange={onChange} />
        <br />
        <p>非受控组件</p>
        <input type="text" />
      </div>

      <div>
        字体图标222
        <i className={`${font["iconfont"]} ${font["icon-weixiu"]}`}></i>
        <span>
          222
          <i
            className={`${font["iconfont"]} ${font["icon-weixiu"]}`}
            style={{ fontSize: 30, color: "red" }}
          ></i>
        </span>
        <i
          className={`${font["iconfont"]} ${font["icon-weixiu"]}`}
          style={{ fontSize: 20, color: "red" }}
        ></i>
      </div>

      <h2>3Hello East_White</h2>
      <div className={style["lessBox"]}>
        <div className={style["box"]}>lessBox</div>
        <div className={style["bigImg"]}></div>
      </div>
      <img src={smallImg} alt="小于10kb的图片" />
      {/* <img src={bigImg} alt="大于于10kb的图片" /> */}
      {/* <div className={scssStyles["scssBox"]}>
        <div className={scssStyles["box"]}>scssBox</div>
      </div>
      <div className={stylStyles["stylBox"]}>
        <div className={stylStyles["box"]}>stylBox</div>
      </div> */}
    </div>
  );
}

export default App;
